<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('月度排课表')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p style="width: 80px">月份：</p>
                                <input type="text" id="month" th:value="${month}" class="form-control"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="searchMonthDays()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <input type="hidden" th:value="${clazzId}" id="clazzId">
    <input type="hidden" th:value="${data}" id="data">
    <div class="row">
        <div class="col-md-pull-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div style="height:540px" class="echarts" id="arrange-month"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var data = $('#data').val();
        view(data);
        <!-- laydate示例 -->
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#month',
                type: 'month'
            });
        });

    });

function view(data) {
    var lineChart = echarts.init(document.getElementById("arrange-month"));
    var dateList = JSON.parse(data);
    var heatmapData = [];
    var lunarData = [];
    for (var i = 0; i < dateList.length; i++) {
        heatmapData.push([
            dateList[i][0],
            0
        ]);
        lunarData.push([
            dateList[i][0],
            1,
            dateList[i][1],
            dateList[i][2]
        ]);
    }
    var month = $('#month').val();

    var lineoption = {
        tooltip: {
            formatter: function (params) {
                return params.value[0];
            }
        },
        visualMap: {
            show: false,
            min: 0,
            max: 300,
            calculable: true,
            seriesIndex: [2],
            orient: 'horizontal',
            left: 'center',
            bottom: 20,
            inRange: {
                color: '#ff3ab2',
                opacity: 0.3
            },
            controller: {
                inRange: {
                    opacity: 0.5
                }
            }
        },

        calendar: [{
            left: 'center',
            top: 'middle',
            cellSize: [70, 70],
            yearLabel: {show: false},
            orient: 'vertical',
            dayLabel: {
                firstDay: 1,
                nameMap: 'cn'
            },
            monthLabel: {
                show: false
            },
            range: month
        }],

        series: [{
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
                show: true,
                formatter: function (params) {
                    var d = echarts.number.parseDate(params.value[0]);
                    return d.getDate() + '\n\n' + params.value[2] + '\n\n';
                },
                color: '#000'
            },
            data: lunarData
        }, {
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
                show: true,
                formatter: function (params) {
                    return '\n\n\n' + (params.value[3] || '');
                },
                fontSize: 14,
                fontWeight: 700,
                color: '#a00'
            },
            data: lunarData
        }, {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: heatmapData
        }]
    };
    //添加点击事件
    lineChart.on('click', function (params) {
        var clazzId = $('#clazzId').val();
        arrange(clazzId, params.value[0]);
    });
    lineChart.setOption(lineoption);
    $(window).resize(lineChart.resize);

}

function searchMonthDays() {
    var month = $('#month').val();
    $.ajax({
        type: "get",
        url: ctx + "mgr/arrange/searchMonthDays?month=" + month,
        success: function(r) {
            if (r.code == 0) {
                view(r.data);
            }
        }
    });
}

    function arrange(clazzId, day) {
        var url = ctx + "mgr/arrange?clazzId=" + clazzId + "&day=" + day;
        $.modal.openTab("排课列表", url);
    }

</script>
</body>
</html>